<template>
  <div class="login_bg">
    <div class="login_main">
      <div class="login-form">
        <div class="login-header">
          <div class="logo" style="background: white">
            <label >社区防疫管理系统</label>
          </div>
        </div>

          <h2>登录</h2>
          <el-form ref="loginForm" :model="loginFormModel" :rules="loginFormRules" size="large">
            <el-form-item prop="email">
              <el-input ref="email" v-model="loginFormModel.account" placeholder="请输入账号">
                <template #prefix>
                  <el-icon class="el-input__icon"><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="pass">
              <el-input clearable show-password v-model="loginFormModel.password" placeholder="请输入密码">
                <template #prefix>
                  <el-icon class="el-input__icon"><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width: 100%" round @click="submitForm">登录</el-button>
            </el-form-item>
          </el-form>
        
        <el-divider></el-divider>
      </div>
    </div>
  </div>

</template>

<script>
import { ElMessage } from "element-plus";

export default {
  name: 'LoginView',
  data(){
    return {
      //登录表单的数据模型，对应服务端的loginDTO
      loginFormModel: {
        account: '',    
        password: '',

      },
      //表单验证规则
      loginFormRules: {
        account: [
          {required: true, message: "请输入账号", trigger: 'blur'}
        ],
        password: {
          required: true, message: "请输入登录密码", trigger: 'blur'
        }
      }

    }
  },
  methods: {
    resetForm(){
      this.loginFormModel.account = '';
      this.loginFormModel.password = '';
      this.$refs.account.focus();
    },
    submitForm(){
      this.$refs.loginForm.validate(valid=>{
        if (!valid)return;
        var that = this;
        this.axios.post('/api/auth/login', this.loginFormModel)
            .then(function(response){
              console.log(response);
              if(response.data.code==200){
                ElMessage({type: 'success', message: "登陆成功"});
                sessionStorage.setItem('staff', JSON.stringify(response.data.data));
                that.$router.replace({path: '/communitypersonnel'});
              }
              else{
                ElMessage({type: 'error', message: "登陆失败"});
              }
            });
      });
    },
  },

}

</script>

<style scoped>
.login_bg {width: 100%;height: 100%;background: #ebf2f6;display: flex;}
.login_main {flex: 1;overflow: auto;display:flex;}
.login-form {
  width: 400px;
  margin: auto;
  padding:20px 30px;
  background: #fff;
   border-radius: 25px;
  }
.login-header {margin-bottom: 20px;}
.login-header .logo {display: flex;align-items: center;justify-content: center;}
.login-header .logo img {width: 35px;height: 35px;vertical-align: bottom;margin-right: 10px;}
.login-header .logo label {font-size: 24px;}
.login-header h2 {font-size: 24px;font-weight: bold;margin-top: 50px;}
.login-oauth {display: flex;justify-content:space-around;}
.login-form .el-divider {margin-top:40px;}
.login_config {position: absolute;top:20px;right: 20px;}

</style>